<template>
  <div>
    <el-card class="box-card">
      <PageTools>
        <template v-slot:before>
          <el-button v-if="checkPerm('addclients')" type="primary" size="small" @click="addFn">添加客户</el-button>
        </template>
        <template v-slot:after>
          <el-row type="flex">

            <el-select v-model="agentvalue" placeholder="请选择经纪">
              <el-option value="" label="全部经纪" />
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="nameInput" type="text" style="width: 550px" placeholder="请输入关键字" />
            <el-button type="primary" @click="filterFn">筛选</el-button>
          </el-row>
        </template>
      </PageTools>
      <!-- <el-button type="primary">添加客户</el-button> -->
      <el-table
        :data="tableData"
        style="width: 100% display: flex"
        border
      >
        <el-table-column label="图片" prop="image" width="180px" align="center">
          <template v-slot="{row}">
            <!-- <el-button @click="a(row)">123</el-button> -->
            <el-image :src="row.image" style="width:100px" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="agent.name" label="经纪" />
        <el-table-column prop="wechat" label="微信" />
        <el-table-column prop="desc" label="介绍">
          <template v-slot="{row}">
            <span
              :label="row.desc"
              :value="row.desc"
              v-html="row.desc"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="145">
          <template v-slot="{row}">
            <el-button v-if="checkPerm('editclients')" type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button v-if="checkPerm('delclients')" type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination
          :total="total"
          :page-size="size"
          layout="prev, pager, next"
          @current-change="pageChangeFn"
        />
      </el-row>
    </el-card>
    <!-- 新增/编辑弹窗 -->
    <el-dialog :visible="showDialog" :title="formData.id?'编辑客户':'新增客户'" @close="closeFn">
      <el-form ref="form" label-width="120px" :rules="rules" :model="formData">
        <el-form-item label="经纪">
          <el-select
            v-model="formData.agent"
            style="width: 50%"
            placeholder="请选择经纪人"
          >
            <el-option
              v-for="item in agentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="formData.name"
            style="width: 50%"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="formData.email"
            style="width: 50%"
            placeholder="请输入邮箱"
          />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
            v-model="formData.phone"
            style="width: 50%"
            placeholder="请输入电话"
          />
        </el-form-item>
        <el-form-item label="微信">
          <el-input
            v-model="formData.wechat"
            style="width: 50%"
            placeholder="请输入微信"
          />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <quill-editor
            v-model="formData.desc"
            @blur="validate"
          />
        </el-form-item>
        <el-form-item label="封面">

          <ImgUpload ref="getUrl" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeFn">取 消</el-button>
        <el-button size="small" type="primary" @click="comfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getClientsList,
  getClientcount,
  addClient,
  getOneClient,
  editClient,
  delClient
} from '@/api/clients'
import { getAgents } from '@/api/agents'
import ImgUpload from '../../components/ImgUpload/index.vue'
// import { log } from 'console'

export default {
  components: { ImgUpload },
  data() {
    return {
      nameInput: null,
      agentvalue: null,
      tableData: [],
      i: [],
      formData: {
        agent: '',
        image: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        id: ''
      },
      showDialog: false,
      rules: {
        name: [{ required: true, message: '名字不能为空!', trigger: 'blur' }],
        phone: [
          { required: true, message: '手机号不能为空!', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不正确!',
            trigger: 'blur'
          }
        ],
        // name: [{ required: true, message: '名字不能为空!', trigger: 'blur' }],
        // name: [{ required: true, message: '名字不能为空!', trigger: 'blur' }],
        desc: [{ required: true, message: '请添加描述！', trigger: 'blur' }, { min: 20, max: 200, message: '字数应在20到200之间!', trigger: 'blur' }]
      },
      page: 1,
      size: 5,
      total: 0,
      agentList: []
    }
  },
  created() {
    this.getClientsList()
    this.getClientcount()

    this.getAgentsList()
  },
  methods: {
    // a(res) {
    //   console.log(res, 66)
    // },
    //  确认按钮
    async comfirm() {
      if (this.$refs.getUrl.fileList.length === 0) {
        this.$message.error('头像必填')
        return
      }
      // 校验表单
      await this.$refs.form.validate()
      if (this.formData.id) {
        // 调用编辑接口
        // console.log(176, this.formData.id)
        this.formData.image = this.$refs.getUrl.fileList[0].url
        await editClient(this.formData)
      } else {
        if (this.$refs.getUrl.fileList.length === 0) {
          this.$message.error('头像必填')
          return
        }
        // if (this.tableData.length === this.size) {
        //   this.page += this.size
        // }
        const res = this.$refs.getUrl
        // console.log(res)
        this.formData.image = res.fileList[0].url
        // 调用新增接口
        // console.log(180, this.formData.id)
        await addClient(this.formData)
      }
      // 关闭清空
      this.closeFn()
      // 刷新客户列表
      // this.getClientsList()
      // this.getClientcount()
      if (this.total % this.size === 1) {
        // console.log(66666666)
        this.page = Math.ceil(this.total / this.size)
      }
    },
    // 获取客户列表
    async getClientsList() {
      const res = await getClientsList({
        _start: (this.page - 1) * this.size,
        _limit: this.size,
        name_contains: this.nameInput,
        agent: this.agentvalue
      })
      // console.log(res)
      this.tableData = res.data
      // console.log(this.page)

      // const res1 = await getClientcount()
      // // console.log(res1)
      // this.page.total = res1.data
      // console.log('123', (this.page - 1) * this.size, this.size)
    },
    // 获取经纪人列表
    async getAgentsList() {
      const res = await getAgents()
      // console.log(215, res)
      this.agentList = res.data
    },
    // 获取客户数量
    async getClientcount() {
      const res = await getClientcount({
        name_contains: this.nameInput || null,
        agent: this.agentvalue || null
      })
      // console.log(165, res)
      this.total = res.data
      // console.log(this.total)
    },
    // 新增按钮
    addFn() {
      this.showDialog = true
      // this.$refs.getUrl.fileList = []
      console.log(111, this.total)
      console.log(222, this.size)
    },
    // 编辑按钮
    async editFn(id) {
      this.showDialog = true
      // console.log(id)
      const res = await getOneClient(id)
      // console.log(193, res)
      this.formData = res.data
      this.$refs.getUrl.fileList = [{ url: '' }]
      // this.$refs.getUrl.fileList[0].url = this.formData.image
      this.$nextTick(() => {
        this.$refs.getUrl.fileList = [{ url: this.formData.image }]
      })
      this.$refs.getUrl.percentage = 100
    },
    // 删除角色
    async delFn(id) {
      // console.log(222, this.formData.id)
      this.$confirm('是否确认删除', '删除', {
        type: 'warning'
      })
        .then(async() => {
          // if (this.tableData.length === 1 && this.page >= this.size) {
          //   this.page -= this.size
          // }
          // 调用删除接口
          await delClient(id)
          // 重新渲染客户列表
          this.getClientsList()
          this.getClientcount()
        })
        .catch(() => {
          console.log('取消删除')
        })
    },
    // 关闭函数
    closeFn() {
      // 关闭弹窗
      this.showDialog = false
      //  清空内容
      this.formData = {
        agent: '',
        image: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        id: ''
      }

      // console.log(res)
      this.formData.image = ''
      // 重置校验
      this.$refs.form.resetFields()
      // 清除上传图片残留
      this.$refs.getUrl.fileList = []
      this.getClientsList()
    },
    pageChangeFn(page) {
      this.page = page // 当前页
      // console.log(page)
      this.getClientsList()
    },
    validate() {
      // 手动校验内容
      this.$refs.form.validateField('desc')
    },
    // 经纪人下拉列表搜索
    // async searchFn() {
    //   if (this.agentvalue === '') {
    //     // console.log(123)
    //     this.getClientsList()
    //   } else {
    //     const res = await getClientsList({ _start: (this.page - 1) * this.size,
    //       _limit: this.size, agent: this.agentvalue || null, name_contains: this.nameInput || null })
    //     // console.log(285, res)
    //     // this.total = res.data.length
    //     // const { data } = await this.getClientcount()
    //     const { data } = await getClientcount({
    //       name_contains: this.nameInput || null,
    //       agent: this.agentvalue || null })

    //     // console.log(data)
    //     this.total = data
    //     console.log(329, this.total)
    //     // console.log(323, data)
    //     this.tableData = res.data
    //   }
    // },
    // // 关键词搜索
    // async filterFn() {
    //   // console.log(this.name, this.size)
    //   // const res = await searchNameFn(this.name)
    //   const res = await getClientsList({ _start: (this.page - 1) * this.size,
    //     _limit: this.size, name_contains: this.nameInput || null, agent: this.agentvalue || null })
    //   // console.log(295, res)
    //   // this.total = res.data.length

    //   const { data } = await getClientcount({
    //     name_contains: this.nameInput || null,
    //     agent: this.agentvalue || null })
    //   console.log(323, data)
    //   this.total = data
    //   // // console.log(this.total)
    //   this.tableData = res.data
    // }

    async searchFn() {
      await this.getClientsList()
      await this.getClientcount()
    },
    async filterFn() {
      await this.getClientsList()
      await this.getClientcount()
    }
  }
}
</script>
  <style lang="scss" scoped>
.box-card {
  margin: 15px;
}
.ql-editor{
  min-height:150px
}
</style>
